<template>
    <div>
        <van-nav-bar
                title="收货地址"
                @click-left="leftButton"
                left-arrow
        />
        <van-address-list v-if="type == false"
                          v-model="chosenAddressId"
                          :list="list"
                          default-tag-text="默认"
                          @add="onAdd"
                          @edit="onEdit"
        >
        </van-address-list>
        <van-empty v-if="empty" description="目前还没有添加地址"/>

        <van-address-edit v-if="type == true"
                          :area-list="areaList"
                          show-postal
                          :show-delete="showDelete"
                          show-set-default
                          show-search-result
                          :address-info="currentAddress"
                          :search-result="searchResult"
                          :area-columns-placeholder="['请选择', '请选择', '请选择']"
                          @save="onSave"
                          @delete="onDelete"
                          @change-detail="onChangeDetail"
        >
        </van-address-edit>
    </div>
</template>

<script>
    import Area from "./Area"
    import { Toast } from 'vant';
    export default {
        name: "MyAddress",
        data() {
            return {
                empty: false,
                areaList: Area,
                searchResult: [],
                type: false,
                chosenAddressId: '1',
                list: [],
                currentAddress: {},
                showDelete: true
            };
        }
        , created() {
            this.getAddressData();
        },
        methods: {
            getAddressData() {
                this.list = []
                this.$axios("http://127.0.0.1:8075/address?userId="+this.users.userId).then(res => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        let obj = new Object();
                        let ads = res.data.data[i];
                        console.log(ads)
                        obj.id = ads.shippingAddressId;
                        obj.name = ads.consignee;
                        obj.tel = ads.userPhoneNumber;
                        obj.province = ads.cityView.provinceName;
                        obj.provinceCode = ads.cityView.provinceCode;
                        obj.city = ads.cityView.cityName;
                        obj.cityCode = ads.cityView.cityCode;
                        obj.country = ads.cityView.districtsName;
                        obj.countryCode = ads.cityView.districtsCode;
                        obj.addressDetail = ads.detailedAddress;
                        obj.areaCode = "" + ads.district;
                        if (ads.shippingStatus == 1) {
                            obj.isDefault = true
                        } else {
                            obj.isDefault = false
                        }
                        obj.address = ads.cityView.provinceName + ads.cityView.cityName + ads.cityView.districtsName + ads.detailedAddress;
                        this.list.push(obj)
                    }
                    if (this.list.length == 0) {
                        this.empty = true
                    }
                })
            },
            leftButton() {
                if (this.type) {
                    this.getAddressData();
                    this.type = false;
                } else {
                    this.$router.back()
                }
            },
            onSave(val) {
                console.log(val)
                if(this.showDelete){
                    this.$axios({
                        method: "put",
                        url: "http://127.0.0.1:8075/address",
                        data: {
                            shippingAddressId: val.id,
                            userId: this.users.userId,
                            province: Number(this.currentAddress.provinceCode),
                            city: Number(this.currentAddress.cityCode),
                            district: Number(this.currentAddress.countryCode),
                            detailedAddress: val.addressDetail,
                            userPhoneNumber: val.tel,
                            consignee: val.name
                        }
                    }).then(res => {
                        console.log(res)
                        this.leftButton()
                    })
                }else{
                    this.$axios({
                        method: "post",
                        url: "http://127.0.0.1:8075/address",
                        data: {
                            userId: this.users.userId,
                            district: val.areaCode,
                            detailedAddress: val.addressDetail,
                            userPhoneNumber: val.tel,
                            consignee: val.name
                        }
                    }).then(res => {
                        console.log(res)
                        if(res.data.code == 500){
                            Toast(res.data.msg);
                        }else{
                            this.leftButton()
                        }
                    })
                }
            },
            onDelete() {
                this.$axios({
                    method: "delete",
                    url: "http://127.0.0.1:8075/address",
                    data: {
                        "shippingAddressId": this.currentAddress.id
                    }
                }).then(res => {
                    if(res.data.code == 500){
                        Toast(res.data.msg);
                    }else{
                        this.leftButton()
                    }
                })
            },
            onChangeDetail(val) {
                console.log(val)
            }, onAdd() {
                this.empty = false;
                this.showDelete = false;
                this.currentAddress = {}
                this.type = true
            },
            onEdit(item, index) {
                this.empty = false;
                this.currentAddress = item;
                this.showDelete = true;
                this.type = true
            }
        }
    }
</script>

<style scoped>

</style>
